// 轮播图初始化
$(document).ready(function() {
    $('.slider').slick({
        autoplay: true,
        dots: true
    });

    // 登录表单验证
    $('#login-form').submit(function(e) {
        const email = $('#login-email').val();
        const password = $('#login-password').val();
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        if (!emailRegex.test(email)) {
            e.preventDefault();
            $('#email-error').text('请输入有效的邮箱地址！');
        }
    });

    // 商品筛选功能
    $('.filter-btn').click(function() {
        $('.filter-btn').removeClass('active');
        $(this).addClass('active');
        const category = $(this).data('category');
        filterProducts(category);
    });
});
// 商品数据
const products = [
    {
        id: 1,
        name: "天然无谷猫粮",
        category: "food",
        price: 189.00,
        image: "img/product1.jpg",
        specs: "重量：5kg | 适用年龄：全阶段",
        description: "采用新鲜三文鱼配方，不含人工添加剂"
    },
    // 更多商品数据...
];

// 初始化商品展示
function renderProducts(filteredProducts) {
    const grid = document.getElementById('productGrid');
    grid.innerHTML = filteredProducts.map(product => `
        <div class="product-card" data-category="${product.category}">
            <div class="product-image">
                <img src="${product.image}" alt="${product.name}">
            </div>
            <div class="product-info">
                <h3 class="product-title">${product.name}</h3>
                <p class="product-specs">${product.specs}</p>
                <p class="product-price">¥${product.price.toFixed(2)}</p>
                <button class="add-cart-btn" onclick="addToCart(${product.id})">
                    <i class="fas fa-cart-plus"></i> 加入购物车
                </button>
            </div>
        </div>
    `).join('');
}

// 分类筛选功能
document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        
        const category = btn.dataset.category;
        const filtered = category === 'all' 
            ? products 
            : products.filter(p => p.category === category);
        renderProducts(filtered);
    });
});

// 价格筛选功能
document.getElementById('priceRange').addEventListener('input', (e) => {
    const maxPrice = parseInt(e.target.value);
    document.getElementById('priceValue').textContent = maxPrice;
    const filtered = products.filter(p => p.price <= maxPrice);
    renderProducts(filtered);
});

// 排序功能
document.getElementById('sortSelect').addEventListener('change', (e) => {
    const sorted = [...products].sort((a,b) => {
        switch(e.target.value) {
            case 'price-asc': return a.price - b.price;
            case 'price-desc': return b.price - a.price;
            default: return 0;
        }
    });
    renderProducts(sorted);
});

// 购物车功能
let cart = [];
function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    cart.push(product);
    updateCartDisplay();
}

function updateCartDisplay() {
    document.querySelector('.cart-count').textContent = cart.length;
    // 更新购物车商品列表和总价...
}
// 新闻分类筛选
document.querySelectorAll('.category-list a').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const category = e.target.dataset.category;
        
        // 切换激活状态
        document.querySelectorAll('.category-list li').forEach(li => {
            li.classList.remove('active');
        });
        e.target.parentElement.classList.add('active');
        
        // 执行筛选逻辑
        filterNews(category);
    });
});

function filterNews(category) {
    const newsCards = document.querySelectorAll('.news-card');
    newsCards.forEach(card => {
        const cardCategory = card.querySelector('.category-tag').classList[1];
        if (category === 'all' || cardCategory === category) {
            card.style.display = 'grid';
        } else {
            card.style.display = 'none';
        }
    });
}

// 分页功能
document.querySelectorAll('.page-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        // 加载对应页码数据
    });
});

// 订阅功能
document.querySelector('.subscribe-btn').addEventListener('click', () => {
    const email = document.querySelector('.subscribe-box input').value;
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (regex.test(email)) {
        alert('订阅成功！');
    } else {
        alert('请输入有效的邮箱地址');
    }
});

// 商品详情弹窗功能增强
document.querySelectorAll('.product-card').forEach(card => {
    card.addEventListener('click', (e) => {
        if(!e.target.classList.contains('add-to-cart-btn')) {
            const productId = card.dataset.id;
            const product = products.find(p => p.id == productId);
            
            const modal = document.getElementById('productModal');
            modal.querySelector('.modal-image').src = product.image;
            modal.querySelector('.modal-title').textContent = product.name;
            modal.querySelector('.modal-price').textContent = `¥${product.price.toFixed(2)}`;
            modal.querySelector('.modal-specs').textContent = product.specs;
            modal.querySelector('.modal-desc').textContent = product.description;
            modal.style.display = 'block';
        }
    });
});

// 联系表单验证
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    // 表单验证逻辑
});

// 关闭弹窗
document.querySelector('.close-btn').addEventListener('click', () => {
    document.getElementById('productModal').style.display = 'none';
});


// 商品筛选功能
$('.filter-btn').click(function() {
    $('.filter-btn').removeClass('active');
    $(this).addClass('active');
    const category = $(this).data('category');
    filterProducts(category);
});

function filterProducts(category) {
    let filtered = products;
    if (category !== 'all') {
        filtered = products.filter(p => p.category === category);
    }
    
    renderProducts(filtered);
}

function renderProducts(products) {
    const $grid = $('.product-grid');
    $grid.empty();
    
    products.forEach(product => {
        $grid.append(`
            <div class="product-card" data-id="${product.id}">
                <div class="product-badge">${product.badge || ''}</div>
                <img src="${product.image}" alt="${product.name}" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">${product.name}</h3>
                    <div class="product-price">¥${product.price.toFixed(2)}</div>
                    <p>${product.description}</p>
                    <button class="btn add-cart-btn">加入购物车</button>
                </div>
            </div>
        `);
    });
}

// 初始化时渲染所有商品
$(document).ready(function() {
    renderProducts(products);
});